import { Suspense } from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import routes from './routes'
const RoutesList = (routes) => {
	return routes.map((item, index) => {
		const { path, exact, children, navigate } = item
		return (
			<Route
				key={path}
				path={path}
				exact={!!exact}
				element={!!navigate ? item.element : <item.element />}
			>
				{!!children ? RoutesList(children) : ''}
			</Route>
		)
	})
}

function MyRouter(props) {
	return (
		<Router>
			<Suspense fallback={<div>loading...</div>}>
				<Routes>{RoutesList(routes)}</Routes>
			</Suspense>
		</Router>
	)
}

export default MyRouter
